<template>
    <div>
      <div class="container">
        <div>
          <swiper class="swiper" autoplay="true" interval="5000" duration="1000">
            <block v-for="item in movies" :key="item.index">
              <swiper-item class="am-slider">
                <img :src="item.url"/>
                <div>
                  <i class="iocn iconfont">&#xe67f;</i>
                </div>
                <div class="f12">1 / 2</div>
              </swiper-item>
            </block>
          </swiper>
        </div>
        <section>
          <p class="pl15">靠垫轻奢简约现代欧式抱 枕沙发</p>
          <aside>
            <p>剩余</p>
            <p style="margin-top: 5px;"><span>225</span>个</p>
          </aside>
        </section>
        <main class="pl13-pt13">
          <header>商品介绍</header>
          <p style="margin-top: 20px">1.除去固定花形，其余面料花型裁剪均为随机，不能保证有如 图所示的效果，图片仅供参考，介意的买家请谨慎购买！</p>
          <p> 2.本店产品均不可以机洗，建议轻柔手洗或者干洗，特殊的 款式只能干洗,例如竹纤维面料，仅限于干洗，不能水洗和机 洗，水洗之后会有缩水情况(这是正常情况，非质量问题)</p>
        </main>
      </div>
      <footer>
        <p><span>1256</span>积分</p>
        <button type="button" class="am-btn am-btn-success">立即兑换</button>
      </footer>
    </div>
</template>

<script type="ECMAScript 6">
  export default {
    name: "credits-details",
    data () {
      return {
        movies: [
          { url: '../../../../static/images/product.png' },
          { url: '../../../../static/images/product.png' },
          { url: '../../../../static/images/product.png' }
          ]
      };
    }
  };
</script>

<style lang="stylus">
  .swiper { height: 225px; width 100vw;}
  .swiper image { height: 100%; width: 100%;}
  .am-slider {position: relative;}
  .am-slider div:nth-child(2) {position: absolute;top: 14px;right: 14px;width: 35px;height: 35px;background: rgba(0, 0, 0, 0.6);;border-radius: 50%;text-align: center;line-height: 35px;}
  .am-slider div:nth-child(2) > i {color: #fff;}
  .am-slider div:nth-child(3) {position: absolute;bottom: 11px;right: 14px;min-width: 40px;height: 25px;text-align: center;line-height: 25px;background: rgba(0, 0, 0, 0.6);border-radius: 12px;color: #fff;}
  .container{padding-bottom: 50px;}
  .container section{ display: flex; align-items: center; width: 100%; height: 55px; background: #fff;}
  .container section p{flex: 1; font-size: 14px; color: #606060;}
  .container section aside{width: 130px; text-align: center; border-left: 1px solid #f3f2f2; font-size: 12px; line-height: 15px;}
  .container section aside span{font-size: 16px; color:#F54727;}
  .container main{margin-top: 8px; padding 25px 15px; background: #fff;}
  .container main header{font-size: 16px; color:#606060;}
  .container main p{font-size: 13px; color: #747474; margin: 5px 0;}
  footer {position: fixed; bottom: 0; display: flex; align-items: center; width: 100%; height: 50px; background: #fff;}
  footer p{flex: 1; text-align: center; font-size: 12px;}
  footer p span{ font-size: 18px;color: #F54727;}
  footer .am-btn{ width: 150px; height: 50px; border-radius 0; color #fff;}
  footer .am-btn-success{background: #41B962;border-color: #41B962;}
  footer .am-btn-success:focus, .am-btn-success:hover{background: #41B962; border-color: #41B962;}
</style>
